<template>
  <a-modal :title="formTile + '封样明细'" :visible="true" width="70%" :footer="null" @cancel="reset">
    <div class="main">
      <div class="steps-content">
        <a-row type="flex" justofy="start" align="top">
          <a-col span="24">
            <a-descriptions bordered :column="{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }">
              <a-descriptions-item label="单号">
                {{ billNo }}
              </a-descriptions-item>
              <a-descriptions-item label="单据状态">
                {{ FyDetail.billFlag }}
              </a-descriptions-item>
              <a-descriptions-item label="工艺单号">
                {{ FyDetail.ksBillNo }}
              </a-descriptions-item>
              <a-descriptions-item label="样衣号">
                {{ FyDetail.sampleCode }}
              </a-descriptions-item>
              <a-descriptions-item label="品名">
                {{ FyDetail.sampleName }}
              </a-descriptions-item>
              <a-descriptions-item label="品类">
                {{ FyDetail.sampleCat }}
              </a-descriptions-item>
              <a-descriptions-item label="品牌">
                {{ FyDetail.brand }}
              </a-descriptions-item>
              <a-descriptions-item label="款式">
                {{ FyDetail.styleId }}
              </a-descriptions-item>
              <a-descriptions-item label="波段">
                {{ FyDetail.band }}
              </a-descriptions-item>
              <a-descriptions-item label="厂家">
                {{ FyDetail.factory }}
              </a-descriptions-item>
              <a-descriptions-item label="封样日期">
                {{ FyDetail.audDate }}
              </a-descriptions-item>
              <a-descriptions-item label="封样人">
                {{ FyDetail.sealer }}
              </a-descriptions-item>
            </a-descriptions>
            <a-card>
              <a-form :form="form" :labelCol="FormItemLayout.labelCol" :wrapperCol="FormItemLayout.wrapperCol">
                <a-form-item label="是否重新封样" style="text-align: left">
                  {{ FyDetail.isReSeal }}
                </a-form-item>

                <a-form-item label="重新封样原因" style="text-align: left">
                  {{ FyDetail.reSealReason }}
                </a-form-item>

                <a-form-item label="发现问题类型" style="text-align: left">
                  {{ FyDetail.problemType }}
                </a-form-item>

                <a-form-item label="具体问题" style="text-align: left">
                  {{ FyDetail.specificProblem }}
                </a-form-item>
                <a-form-item label="同意更改工厂优化工艺" style="text-align: left">
                  {{ FyDetail.optimizeCraft }}
                </a-form-item>
                <a-form-item label="备注" style="text-align: left">
                  {{ FyDetail.remark }}
                </a-form-item>

                <a-form-item label="红扣样" style="text-align: left">
                  {{ FyDetail.redButtonSample }}
                </a-form-item>

                <a-form-item label="齐码质量登记" style="text-align: left">
                  {{ FyDetail.qualitySign }}
                </a-form-item>

                <a-form-item label="工艺师" style="text-align: left">
                  {{ FyDetail.crafter }}
                </a-form-item>

                <a-form-item label="封样意见" style="text-align: left">
                  {{ FyDetail.samplerOpinion }}
                </a-form-item>
              </a-form>
            </a-card>
            <a-card>
              <a-form :form="form" :labelCol="FormItemLayout.labelCol" :wrapperCol="FormItemLayout.wrapperCol">
                <a-form-item label="童装绳带确认" style="text-align: left">
                  {{ FyDetail.ropeConfirm }}
                </a-form-item>

                <a-form-item label="齐码定位裁剪" style="text-align: left">
                  {{ FyDetail.locationClip }}
                </a-form-item>

                <a-form-item label="齐码胶印" style="text-align: left">
                  {{ FyDetail.offsetPrint }}
                </a-form-item>

                <a-form-item label="部门" style="text-align: left">
                  {{ FyDetail.department }}
                </a-form-item>

                <a-form-item label="业务员" style="text-align: left">
                  {{ FyDetail.auderYwy }}
                </a-form-item>

                <a-form-item label="版师意见" style="text-align: left">
                  {{ FyDetail.samplerOpinion }}
                </a-form-item>

                <a-form-item label="品牌排名" style="text-align: left">
                  {{ FyDetail.brandRank }}
                </a-form-item>

                <a-form-item label="试穿确认" style="text-align: left">
                  {{ FyDetail.fittingConfirm }}
                </a-form-item>

                <a-form-item label="没试穿确认原因" style="text-align: left">
                  {{ FyDetail.unFittingReason }}
                </a-form-item>
                <a-form-item label="重点工艺" style="text-align: left">
                  {{ FyDetail.importantCraft }}
                </a-form-item>
              </a-form>
            </a-card>
          </a-col>
        </a-row>
      </div>
      <div>
        <a-card>
          <a-table :columns="column1" :data-source="SizeDetail"> </a-table>
        </a-card>
      </div>
    </div>
  </a-modal>
</template>

<script>
import { getFyBillDetail } from '@api/rd/index'

const column1 = [
  {
    title: '行号',
    dataIndex: 'seq'
  },
  {
    title: '部位',
    dataIndex: 'part'
  },
  {
    title: '测量方法',
    dataIndex: 'clff'
  }
]

export default {
  props: {
    content: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      id: '',
      column1,
      billNo: '',
      ksBillNo: '',
      ksBillId: '',
      //loading: false,
      disabled: false,
      idEdit: false,
      FyDetail: {},
      SizeDetail: [],
      form: this.$form.createForm(this),
      FormItemLayout: {
        labelCol: {
          xl: { span: 5 }
        },
        wrapperCol: {
          xl: { span: 15 }
        }
      }
    }
  },
  created() {
    const { content } = this.$props
    if (content) {
      this.formTile = '查看'
      this.id = content.id
      this.billNo = content.billNo
      this.ksBillNo = content.ksBillNo
      this.$nextTick(() => {
        this.getFyDetail()
        this.disabled = true
        //this.getSizeBillId()
        this.$message.error(this.ksBillNo)
      })
      this.idEdit = true
    }
  },
  methods: {
    reset() {
      this.form.resetFields()
      this.$emit('closeFyDetail')
    },
    async getFyDetail() {
      const params = {
        billNo: this.billNo
      }
      try {
        const res = await getFyBillDetail(params)
        if (res.code == 200) {
          this.FyDetail = res.data
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取封样单失败!')
          }
        }
      } catch (error) {
        this.$message.error('获取封样单失败!')
      }
    },
    async getSizeBillId(){
      const params = {
        billNo: this.ksBillNo
      }
      try{
        const res = await getDetailList('bill',params)
        if (res.code == 200){
          this.ksBillId = res.data.id
          this.getSizeDetail()
        } else {
          if (res.msg){
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取工艺单失败!')
          }
        }
      } catch (error) {
        this.$message.error('获取工艺单失败!')
      }
    },
    async getSizeDetail() {
      const params = {
        billId: this.ksBillId
      }
      try {
        const res = await getBillSize('size', params)
        if (res.code == 200) {
          this.SizeDetail = res.data
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取尺寸信息失败!')
          }
        }
      } catch (error) {
        this.$message.error('获取尺寸信息失败!')
      }
    }
  }
}
</script>

<style scoped>
.steps-content {
  margin-top: 16px;
  min-height: 200px;
  text-align: center;
  padding-top: 50px;
}
</style>